<template>
    <swiper :options="swiperOption" class="warapper" v-if="isShowed">
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id" class="swiper-img" >
    <img :src='item.imgUrl'/>
    </swiper-slide>
    <!-- <swiper-slide >
    <img src='./images/3.jpg'/>
    </swiper-slide> -->
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    
  </swiper>
</template>
<script>
   export default{
       name:'HomeSwiper',
       props:{ 
           list:Array
       },
       data(){
           return {
               swiperOption:{
                   pagination:'.swiper-pagination',
                   loop:true,
                    autoplay:true
               }
           }
       },
       computed :{
           isShowed () {
               return this.list.length;
           }
       }
   } 
</script>
<style lang="stylus"  scoped>
    .warapper >>>.swiper-pagination-bullet-active
        background :#fff !important
    .warapper
        overflow :hidden
        width:100%
        height:0
        padding-bottom:27%
        background :#fff
        .swiper-img
            width :100%
</style>


